<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>妖怪商社 immortal's shop</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${css }/imtshop.css">
	<link href="${res }/tree/zzsc.css" rel="stylesheet" type="text/css">
	<script src="${js }/jquery-1.10.2.js"></script>
	<script src="${res }/tree/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
			//设置左侧高度和main相同
			var mainHeight = $('#main').height();
			$('#indexLeftColumn').height(mainHeight);
			
			$("#nav .tit").slide({
				type:"menu",
				titCell:".mod_cate",
				targetCell:".mod_subcate",
				delayTime:0,
				triggerTime:10,
				defaultPlay:false,
				returnDefault:true
			});
		});
	</script>
</head>
<body>
	<%@include file="commons/header.jsp" %>
	<div id="main">
		
		<div id="indexLeftColumn">
			<div id="nav">
				<div class="mod_cate_hd">全部商品分类</div>
				<ul class="tit">
					<c:forEach items="${catategorys }" var="c1">
						<li class="mod_cate">
							<h2>
								<i class="arrow_dot fr"></i>${c1.name }
							</h2>
							<p class="mod_cate_r">${c1.name }的大分类</p> <c:if
								test="${not empty c1.subCategorys }">
								<div class="mod_subcate" style="width: 550px;">
									<div class="mod_subcate_main">
										<c:forEach items="${c1.subCategorys }" var="c2">
											<dl>
												<dt>${c2.name }</dt>
												<c:if test="${not empty c2.subCategorys }">
													<dd>
														<c:forEach items="${c2.subCategorys }" var="c3">
															<a href="${ctx }/index?categoryId=${c3.id}">${c3.name }</a>
														</c:forEach>
													</dd>
												</c:if>
											</dl>
										</c:forEach>
									</div>
								</div>
							</c:if>
						</li>
					</c:forEach>
				</ul>
			</div>
		</div>

		<div id="indexRightColumn">
			<c:forEach items="${page.list}" var="product">
				<div class="categoryBox1">
					<c:if test="${not empty product.defaultPicture}">
						<a href='${ctx }/product/detail?id=${product.id}'>
							<img src="${img }/product/${product.defaultPicture}" width="100%" height="80%">
						</a>
					</c:if>
					<a href='${ctx }/product/detail?id=${product.id}'> <span class="categoryLabelText"  style="font-size: medium;">${product.name}</span>
					</a> 简介：
					${fn:substring(product.description, 0, 20) }...
				</div>
			</c:forEach>
			<!-- 开始分页 -->
			<div id="pageation">
				共${page.totalCount }条记录，共有${page.pageCount }页 &nbsp;&nbsp;&nbsp;&nbsp;
				<c:if test="${1 != page.pageNum}">
					<a href="${ctx }/index?categoryId=${param.categoryId}&numPerPage=1&numPerPage=${page.numPerPage}">|&lt;</a>
				</c:if>
				<c:forEach begin="1" end="${page.pageCount > 10 ? 10 : page.pageCount }" var="p">
					<c:if test="${p eq page.pageNum}">
						|<a>${p }</a>
					</c:if>
					<c:if test="${p != page.pageNum}">
						|<a href="${ctx }/index?categoryId=${param.categoryId}&numPerPage=${page.pageNum }&numPerPage=${page.numPerPage}">${p }</a>
					</c:if>
				</c:forEach>
				<c:if test="${page.pageCount != page.pageNum}">
					<a href="${ctx }/index?categoryId=${param.categoryId}&numPerPage=${page.pageCount }&numPerPage=${page.numPerPage}">&gt;|</a>
				</c:if>
			</div>
		</div>
	</div>
	<%@include file="commons/footer.jsp"%> 
</body>
</html>